<template>
  <view class="play_details">
    <view class="play_navigation">
      <navigation></navigation>
    </view>
    <view class="play_details_body">
      <view class="play_details_body_header">
        <view>{{ audioContent.name }}</view>
      </view>
      <view class="lyric">
        <binglyric :lyrics="audioContent.songPlayLycric" :curTime="songPlayTimeLycric"></binglyric>
      </view>
       <!-- <view style="text-align: center;"> {{ lyric }}</view> -->
      <view class="play_toolbar">
       
        <view class="play_like" @click="like">
          <text
            style="font-size: 80rpx; color: #fff"
            class="iconfont icon-xihuan"
          ></text>
        </view>
        <!-- 上一首 -->
        <view class="play_last" @click.stop="last">
          <text
            style="font-size: 90rpx; color: #fff"
            class="iconfont icon-shangyishou"
          ></text>
        </view>
        <!-- 播放or暂停 -->
        <view class="play_stop">
          <text
            v-if="playShow"
            @click.stop="stop"
            style="font-size: 90rpx; color: #fff"
            class="iconfont icon-bf24gf-pause2"
          ></text>
          <text
            v-else
            @click.stop="play"
            style="font-size: 90rpx; color: #fff"
            class="iconfont icon-zt24gf-play"
          ></text>
        </view>
        <!-- 下一首 -->
        <view class="play_next" @click.stop="next">
          <text
            style="font-size: 90rpx; color: #fff"
            class="iconfont icon-xiayishou"
          ></text>
        </view>
        <!-- 播放列表 -->
        <view class="play_list_btn" @click="playListCheck">
          <text
            style="font-size: 70rpx; color: #fff"
            class="iconfont icon-gengduo"
          ></text>
        </view>
      </view>
    </view>
    <play-popup></play-popup>
  </view>
</template>

<script>
import navigation from "../navigation/indexb.vue";
import binglyric from "../bing-lyric/bing-lyric.vue";
import Lyric from "lyric-parser";
import { mapState, mapMutations } from "vuex";
export default {
  components: { navigation, binglyric },

  directives: {},
  computed: {
    ...mapState(["audioContent"]),
    ...mapState(["songPlayTimeLycric"]),
    ...mapState(["playShow"]),
  },
  data() {
    return {
      lyric: [],
      lyricIndex: "",
    };
  },

  mounted() {},
  onLoad() {
  },
  watch: {
    songPlayTimeLycric() {
      this.audioContent.songPlayLycric.forEach((item, index) => {
        let s = item.split("]")[0].split("[")[1];
        if (s != undefined && s != "") {
          let newS = Number(s.split(":")[0]) * 60 + Number(s.split(":")[1]);
          if (parseInt(this.songPlayTimeLycric) === parseInt(newS)) {
            let lyric = {
              text:this.audioContent.songPlayLycric[index].split("]")[1]
            }
            console.log(lyric);
            let i =0;
            if(lyric.text!=''){
              this.lyric.push(lyric);
            }
          }
        }
      });
    },
    audioContent() {
    },
  },
  methods: {
    //滚动歌词
    ...mapMutations(["setAudioPlayIndexs"]),
    ...mapMutations(["setPlayShow"]),
    ...mapMutations(["setPlayPopupShow"]),
    //上一首
    last() {
      this.setAudioPlayIndexs("last");
    },
    //下一首
    next() {
      this.setAudioPlayIndexs("next");
    },
    //播放暂停
    play() {
      this.$audio.play();
      this.setPlayShow(true);
    },
    stop() {
      this.$audio.pause();
      this.setPlayShow(false);
    },
    rollingLyric() {},
    like() {
      uni.showToast({
        title: "该功能待完善!",
        duration: 2000,
        icon: "none",
      });
    },
    playListCheck() {
      //  uni.showToast({
      //   title: '该功能待完善!',
      //   duration: 2000,
      //   icon: 'none'
      // });
      this.setPlayPopupShow(true);
    },
  },
  formatLyricTime(time) {
    // 格式化歌词的时间 转换成 sss:ms
    const regMin = /.*:/;
    const regSec = /:.*\./;
    const regMs = /\./;

    const min = parseInt(time.match(regMin)[0].slice(0, 2));
    let sec = parseInt(time.match(regSec)[0].slice(1, 3));
    const ms = time.slice(
      time.match(regMs).index + 1,
      time.match(regMs).index + 3
    );
    if (min !== 0) {
      sec += min * 60;
    }
    return Number(sec + "." + ms);
  },
};
</script>

<style lang="scss" scoped>
.play_details {
  width: 100%;
  height: 100%;
  .play_navigation {
    width: 100%;
    height: 100%;
    background-color: red;
  }
  .play_details_body {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(
      to right,
      #eea2a2 0%,
      #bbc1bf 19%,
      #57c6e1 42%,
      #b49fda 79%,
      #7ac5d8 100%
    );

    .play_details_body_header {
      width: 100%;
      height: 100rpx;
      font-size: 35rpx;
      font-weight: 900;
      display: flex;
      color: #fff;
      justify-content: center;
      align-items: center;
      view {
        width: 60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
    .lyric{
      position: fixed;
    z-index: 99;
    width: 100%;
    }
    .play_toolbar {
      width: 100%;
      height: 200rpx;
      // background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding-bottom: 20rpx;
      position: absolute;
      bottom: 0;
      .play_next {
        // position: absolute;
        // right: 110rpx;
        // bottom: 20rpx;
      }
      .play_last {
        // position: absolute;
        // right: 230rpx;
        // bottom: 20rpx;
      }
      .play_stop {
        margin-left: 10rpx;
        margin-right: 10rpx;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        // position: absolute;
        // right: 171rpx;
        // bottom: 20rpx;
      }
      .play_list_btn {
        position: absolute;
        right: 40rpx;
        // bottom: 20rpx;
      }
      .play_like {
        position: absolute;
        left: 40rpx;
      }
    }
  }
}
</style>